<template>
  <div id="orderSeePage">
    <el-row :gutter="10" style="padding-bottom: 10px">
    <el-col :span="4" class="flex" style="align-items: center">
        <span class="nowrap" style="white-space: nowrap;">通道:</span>
        <el-select v-model="form.channelId" size="small" @change="channelChange" clearable placeholder="请选择">
          <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

    </el-col>
      <el-col :span="4" class="flex" style="align-items: center">
        <span class="nowrap" style="white-space: nowrap;">商户组:</span>
        <el-select v-model="form.groupId" size="small" @visible-change="groupVisibleChange" @change="groupChange" clearable
                   placeholder="请选择">
          <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex" style="align-items: center">
        <span class="nowrap">商户:</span>

        <el-select v-model="orderInfo.businessId" size="small" @visible-change="businessVisibleChange" clearable placeholder="请选择">
          <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex" style="align-items: center">
        <span class="nowrap">用户:</span>


        <el-select v-model="orderInfo.userId" size="small" clearable placeholder="请选择">
          <el-option v-for="item in userAsk" :key="item.value" :label="item.value" :value="item.lable">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex" style="align-items: center">
        <span class="nowrap">支付方式:</span>


        <el-select v-model="orderInfo.payType" size="small" clearable placeholder="请选择">
          <el-option v-for="item in payType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex" style="align-items: center">
        <span class="nowrap">订单状态:</span>


        <el-select v-model="orderInfo.status" size="small" clearable placeholder="请选择">
          <el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="padding-bottom: 10px">
      <el-col  :span="6" class="flex" style="align-items: center">
        <span class="nowrap">起始时间:</span>

        <div class="block">
          <el-date-picker style="width: 100%" size="small" v-model="orderInfo.beginTime" @change="change" type="datetime" placeholder="选择日期时间"
                          class="width1">
          </el-date-picker>
        </div>
      </el-col>
      <el-col  :span="6" class="flex" style="align-items: center">
        <span class="nowrap">结束时间:</span>

        <div class="block ">
          <el-date-picker style="width: 100%" size="small" v-model="orderInfo.endTime" @change="change2" type="datetime" placeholder="选择日期时间"
                          class="width1">
          </el-date-picker>
        </div>
      </el-col>
      <el-col  :span="6" class="flex" style="align-items: center">
        <span class="nowrap">客户订单号:</span>

        <el-input v-model="orderInfo.outOrderNo" size="small" placeholder="请输入完整会员号"></el-input>
      </el-col>
      <el-col  :span="6" class="flex" style="align-items: center">
        <span class="nowrap">平台订单号:</span>

        <el-input v-model="orderInfo.orderNo" size="small" placeholder="请输入完整订单号" ></el-input>
      </el-col>

    </el-row>
    <el-row :gutter="10" style="padding-bottom: 10px">
      <el-col :span="4" class="flex" style="align-items: center">
        <span class="nowrap"> 金额:</span>
        <el-input v-model="orderInfo.realMoney" size="small" placeholder="请输入金额" ></el-input>
      </el-col>
      <el-col :span="4" class="flex" style="align-items: center">
        <span class="nowrap"> 备注:</span>

        <el-input v-model="orderInfo.remark" size="small" placeholder="请输入备注" ></el-input>
      </el-col>
      <el-col :span="6" class="flex" style="align-items: center">
        <span class="nowrap"> 上游订单号:</span>

        <el-input v-model="orderInfo.upOrderNo" size="small" placeholder="请输入完整订单号" ></el-input>
      </el-col>
      <el-col :span="6" class="flex" style="align-items: center">

        <el-button type="primary" size="mini" @click="queryOrderList(0)">查询</el-button>
        <el-button type="primary" size="mini" @click="queryOrderList(1)">今天</el-button>
        <el-button type="primary" size="mini" @click="queryOrderList(2)">昨天</el-button>
        <el-button type="primary" size="mini" @click="orderCountBack">统计</el-button>
      </el-col>
    </el-row>

    <el-row class="orderCheck header">
      <el-col :span="4">失败金额：<span>{{countObj.failMoeny || 0}}</span> 元</el-col>
      <el-col :span="4">失败数量：<span>{{countObj.failNumber || 0}}</span> 单</el-col>
      <el-col :span="4">成功金额：<span>{{countObj.successMoeny || 0}}</span> 元</el-col>
      <el-col :span="4">成功数量：<span>{{countObj.successNumber || 0}}</span> 单</el-col>
      <el-col :span="4">总金额：<span>{{countObj.totalMoeny || 0}}</span> 元</el-col>
      <el-col :span="4">总数量：<span>{{countObj.totalNumber || 0}}</span> 单</el-col>
    </el-row>
    <el-table :data="tableData" border stripe v-loading="loading1">
      <el-table-column type="index" width="60" fixed>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="100" fixed>
      </el-table-column>
      <el-table-column prop="businessName" label="商户名" width="150" fixed>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="100">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160">
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="160">
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="80">
      </el-table-column>
      <el-table-column prop="orderNo" label="平台订单号" width="320">
      </el-table-column>
      <el-table-column prop="outOrderNo" label="客户订单号" width="320">
      </el-table-column>
      <el-table-column prop="upOrderNo" label="上游订单号" width="320">
      </el-table-column>
      <el-table-column prop="payType" label="支付类型" width="120">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
      </el-table-column>

      <el-table-column prop="body" label="用户备注" width="250">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <div style="white-space: nowrap">
            <el-button type="primary" size="small" @click="queRen(scope.row.id)">确认</el-button>
            <el-button type="primary" size="small" @click="reSend(scope.row.id)">重发回调</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--<div class="block" style="text-align: right;padding-right: 20px">-->

      <!--<el-pagination layout="total,prev, pager, next" :current-page.sync="orderInfo.pageNumber"-->
                     <!--:page="orderInfo.pageNumber"-->
                     <!--@current-change="handleCurrentChange" :total="total" :page-size="orderInfo.pageSize">-->
      <!--</el-pagination>-->
    <!--</div>-->
    <div class="block" style="padding: 15px;text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="orderInfo.pageNumber"
        :page-sizes="[5, 8, 10, 13, 15]"
        :page-size="orderInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import dateformat from 'dateformat'
  import payType from '../../assets/paytype'
  import orderType from '../../assets/orderType'

  export default {
    name: "orderSee",
    data () {
      return {
        loading1: false,
        payType: payType,
        orderType: orderType,
        userAsk: [],
        tableData: [],
        orderInfo: {
          userId: undefined,
          beginTime: undefined,
          endTime: undefined,
          status: undefined,
          payType: undefined,
          outOrderNo: undefined,
          orderNo: undefined,
          upOrderNo: undefined,
          pageSize: 5,
          pageNumber: 1,
          businessId: undefined,
          realMoney: undefined,
          remark: undefined
        },
        form: {
          channelId: undefined,
          groupId: undefined
        },

        countObj: {},
        channelList: [],
        groupList: [],
        businessList: []
      }
    },
    created() {
      this.getUserList();
      this.getChannelList()
    },
    methods: {
      getUserList() {
        let params = {
          pageSize: 9999
        }
        this.$api.getUserList(params).then(res => {
          if (res.code == '000000') {
            let mid = res.data.list;
            mid.forEach(item => {
              this.userAsk.push({
                value: item.username,
                lable: item.id
              })
            })
          }
        })
      },
      getChannelList() {
        this.$api.getChannelList().then(res => {
          if (res.code == '000000') {
            this.loading1 = false;
            this.channelList = res.data;
          }
        })
      },
      channelChange(val) {
        if (val) {
          this.$api.getBusinessGroupList(val).then(res => {
            if (res.code == '000000') {
              this.groupList = res.data
            }
          })
        }
      },
      groupVisibleChange(val) {
        if (val) {
          if (!this.form.channelId) {
            this.groupList = []
            this.$message.info('请先选择通道')
          }
        }
      },
      businessVisibleChange(val) {
        if (val) {
          if (!this.form.groupId) {
            this.businessList = []
            this.$message.info('请先选择商户组')
          }
        }
      },
      groupChange(val) {
        if (val) {
          this.$api.getBusinessList(val, {pageSize: 9999}).then(res => {
            if (res.code == '000000') {
              this.businessList = res.data.list
            }
          })
        }
      },
      change(val) {
        if (val === undefined) {
          this.orderInfo.beginTime = val
        } else if (val && val !== undefined && val !== '') {
          this.orderInfo.beginTime = Date.parse(val);
        } else {
          this.orderInfo.beginTime = undefined
        }
      },
      change2(val) {
        if (!val) {
          this.orderInfo.endTime = undefined
        } else {
          this.orderInfo.endTime = Date.parse(val);
        }
      },
      queryOrderList(mes) {
        if (this.orderInfo.beginTime == "") {
          this.orderInfo.beginTime = 0
        }
        if (this.orderInfo.endTime == "") {
          this.orderInfo.endTime = Date.now()
        }
        if (mes != 10) {
          for (let item in this.countObj) {
            console.log(this.countObj[item])
            this.countObj[item] = 0
          }
        }

        this.loading1 = true;

        var timeStamp = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
        if (mes == 1) {
          //今天的
          this.orderInfo.beginTime = timeStamp * 1000
          this.orderInfo.endTime = undefined
          this.orderInfo.pageNumber = 1
        }
        if (mes == 2) {
          //昨天的
          this.orderInfo.beginTime = timeStamp * 1000 - 86400 * 1000
          this.orderInfo.endTime = timeStamp * 1000
          this.orderInfo.pageNumber = 1
        }
        if (mes == 9) {
          this.loading1 = false;
          if(this.orderInfo.endTime && this.orderInfo.beginTime){
            if (this.orderInfo.endTime - this.orderInfo.beginTime > 86400 * 3 *1000){
              this.$message.error('选择时间不能超过3天')
            }else{
              window.open('/ddj/order/export?' + this.linkUrlParams(this.orderInfo))
            }
          } else {
            this.$message.info('请选择开始时间和结束时间')
          }
        } else {
          this.$api.getAllOrderList(this.orderInfo).then(res => {
            if (res.code == '000000') {
              this.loading1 = false;
              this.total = res.data.totalRow;
              this.tableData = res.data.list;
              this.tableData.forEach(item => {
                if (item.createTime) {
                  let date = new Date(item.createTime);
                  item.createTime = dateformat(date, 'yyyy-mm-dd HH:MM')
                }
                if (item.payTime) {
                  let date = new Date(item.payTime);
                  item.payTime = dateformat(date, 'yyyy-mm-dd HH:MM')
                }
                switch (item.payType) {
                  case 0:
                    item.payType = '全部';
                    break;
                  case 1:
                    item.payType = '支付宝扫码';
                    break;
                  case 2:
                    item.payType = '支付宝wap';
                    break;
                  case 3:
                    item.payType = '京东支付';
                    break;
                  case 4:
                    item.payType = 'QQ支付';
                    break;
                  case 5:
                    item.payType = '快捷支付';
                    break;
                  case 6:
                    item.payType = '微信扫码';
                    break;
                  case 7:
                    item.payType = '微信H5';
                    break;
                  case 8:
                    item.payType = 'QQwap';
                    break;
                  case 9:
                    item.payType = '银联扫码';
                    break;
                  case 10:
                    item.payType = '支付宝扫码';
                    break;
                  case 100:
                    item.payType = '支付宝';
                    break;
                  default :
                    break;
                }
                switch (item.status) {
                  case 1:
                    item.status = '待发起';
                    break;
                  case 3:
                    item.status = '待支付';
                    break;
                  case 4:
                    item.status = '支付成功';
                    break;
                  case 5:
                    item.status = '交易完成';
                    break;
                  case 6:
                    item.status = '已结算';
                    break;

                  default :
                    break;
                }
              })
              this.$message({
                type: 'success',
                message: '查询成功'
              })
            }
          })
        }


      },
      linkUrlParams(obj) {
        let str = ''
        if (typeof obj === 'object') {
          for (let i in  obj) {
            if (obj[i]) {
              str = str + i + '=' + obj[i] + '&'
            }
          }
          let mid = str.split('')
          mid.pop()
          return mid.join('')
        }
      },
      orderCountBack() {
        if (this.orderInfo.beginTime == "") {
          this.orderInfo.beginTime = 0
        }
        if (this.orderInfo.endTime == "") {
          this.orderInfo.endTime = Date.now()
        }
        this.$api.getBackOrderCount(this.orderInfo).then(res => {
          this.$message.success('统计成功');
          this.countObj = res.data
        })
      },
      handleCurrentChange(val) {
        this.orderInfo.pageNumber = val;
        this.queryOrderList(10)
      },
      handleSizeChange (val) {
        this.orderInfo.pageSize = val;
        this.queryOrderList(10)
      },
      queRen(id) {
        this.$confirm('是否确认该订单已支付, 此操作将不可更改?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$prompt('请输入订单号', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({value}) => {
            this.$api.confirmOrder(id, {upOrderNo: value}).then(res => {
              if (res.code == '000000') {
                this.$message.success('确认订单成功')
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },
      reSend(id) {
        this.$confirm('是否确定重发回调?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.reSendBack(id).then(res => {
            this.$message.success('重发回调成功')
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      }
    }
  }
</script>

<style lang="less">
  #orderSeePage {
    th {
      text-align: center;
    }
    .nowrap{
      padding-right: 6px;
      font-size: 14px;
    }
    /*.el-input__inner {*/
      /*height: 20px;*/
      /*font-size: 12px;*/
    /*}*/
    /*.el-input {*/
      /*width: 100px;*/
      /*display: inline-block;*/
      /*margin: 0 8px;*/
    /*}*/
    .header {
      padding: 18px 40px;
      font-size: 12px;
      white-space: nowrap;
      display: flex;
      justify-content: flex-start;
    }
    .width1 {
      width: 180px;
    }
    .orderCheck {
      font-size: 14px;
      background-color: lightyellow;
      padding: 10px;
    }
    .el-table__fixed, .el-table__fixed-right {
      overflow: hidden;
    }
  }
</style>
